<template>
  <fs-page>
    <template #header>
      <div class="title">
        网关路由管理
        <fs-icon icon="carbon:router" :spin="true" />
      </div>
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <template #actionbar-right>
        <n-alert class="ml-1" type="warning" title="非专业人员,请勿操作" />
      </template>

      <!--      <template #form_predicates="scope">-->
      <!--        <div v-for="(scopeItem, scopeIndex) in scope.form.predicates" :key="scopeIndex">-->
      <!--          <n-drawer-->
      <!--            >{{ scopeItem.name }}-->
      <!--            <n-button-->
      <!--              v-show="scope.mode !== 'view'"-->
      <!--              @click="removePredicate(scopeItem, scopeIndex, scope.form, scope.key)"-->
      <!--            >-->
      <!--              <fs-icon icon="ant-design:delete-outlined" />-->
      <!--            </n-button>-->
      <!--          </n-drawer>-->
      <!--          <n-tag-->
      <!--            v-for="(tag, index) in scopeItem.args"-->
      <!--            :key="index"-->
      <!--            :closable="scope.mode !== 'view'"-->
      <!--            @close="removePredicateTag(scopeItem, tag)"-->
      <!--            color="success"-->
      <!--            >{{ tag }}</n-tag-->
      <!--          >-->
      <!--          <n-input-->
      <!--            v-if="scopeItem.inputVisible"-->
      <!--            v-model:value="scopeItem.inputValue"-->
      <!--            type="text"-->
      <!--            size="small"-->
      <!--            :style="{ width: '100px' }"-->
      <!--            @blur="handleInputConfirm(scopeItem)"-->
      <!--            @keyup.enter="handleInputConfirm(scopeItem)"-->
      <!--          />-->
      <!--          <n-tag-->
      <!--            v-show="scope.mode !== 'view'"-->
      <!--            v-else-->
      <!--            color="#2db7f5"-->
      <!--            style="margin-left: 10px; margin-bottom: 15px"-->
      <!--            @click="showInput(scopeItem)"-->
      <!--          >-->
      <!--            <fs-icon icon="ant-design:plus-square-outlined" />-->
      <!--            新建{{ scopeItem.predicate }}-->
      <!--          </n-tag>-->
      <!--        </div>-->
      <!--        <n-dropdown>-->
      <!--          <n-button-->
      <!--            v-show="scope.mode !== 'view'"-->
      <!--            dashed-->
      <!--            @mouseover="processPredicates(scope)"-->
      <!--            style="width: 100%"-->
      <!--          >-->
      <!--            添加路由条件-->
      <!--            <fs-icon icon="ant-design:down-outlined" />-->
      <!--          </n-button>-->
      <!--          <template #overlay>-->
      <!--            <n-menu style="margin-top: 12px" :options="router.predicates">-->
      <!--              &lt;!&ndash; 取出差集 &ndash;&gt;-->
      <!--              &lt;!&ndash;              <n-menu-item&ndash;&gt;-->
      <!--              &lt;!&ndash;                v-for="predicate in router.predicates"&ndash;&gt;-->
      <!--              &lt;!&ndash;                :key="predicate"&ndash;&gt;-->
      <!--              &lt;!&ndash;                @click="handlePredicateChange(predicate, scope.form, scope.key)"&ndash;&gt;-->
      <!--              &lt;!&ndash;              >&ndash;&gt;-->
      <!--              &lt;!&ndash;                {{ predicate }}</n-menu-item&ndash;&gt;-->
      <!--              &lt;!&ndash;              >&ndash;&gt;-->
      <!--            </n-menu>-->
      <!--          </template>-->
      <!--        </n-dropdown>-->
      <!--      </template>-->

      <!--      <template #form_filters="scope">-->
      <!--        <div v-for="(scopeItem, scopeIndex) in scope.form.filters" :key="scopeIndex">-->
      <!--          <n-divider-->
      <!--            >{{ scopeItem.name }}-->
      <!--            <n-button-->
      <!--              v-show="scope.mode !== 'view'"-->
      <!--              @click="removeFilter(scopeItem, scopeIndex, scope.form, scope.key)"-->
      <!--            >-->
      <!--              <fs-icon icon="ant-design:delete-outlined" />-->
      <!--            </n-button>-->
      <!--          </n-divider>-->
      <!--          <div v-for="(tag, index) in scopeItem.args" :key="tag.key" style="margin-bottom: 10px">-->
      <!--            <n-input-->
      <!--              :disabled="scope.mode === 'view'"-->
      <!--              v-model:value="tag.key"-->
      <!--              placeholder="参数键"-->
      <!--              style="width: 45%; margin-right: 8px"-->
      <!--            />-->
      <!--            <n-input-->
      <!--              :disabled="scope.mode === 'view'"-->
      <!--              v-model:value="tag.value"-->
      <!--              placeholder="参数值"-->
      <!--              style="width: 40%; margin-right: 8px"-->
      <!--            />-->
      <!--            <fs-icon-->
      <!--              icon="ant-design:delete-outlined"-->
      <!--              @click="removeFilterParams(scopeItem, index)"-->
      <!--              v-show="scope.mode !== 'view'"-->
      <!--            />-->
      <!--          </div>-->
      <!--          <n-button-->
      <!--            v-show="scope.mode !== 'view'"-->
      <!--            dashed-->
      <!--            style="margin-left: 28%; width: 30%"-->
      <!--            size="small"-->
      <!--            @click="addFilterParams(scopeItem)"-->
      <!--          >-->
      <!--            <fs-icon icon="ant-design:plus-square-outlined" />-->
      <!--            添加参数-->
      <!--          </n-button>-->
      <!--        </div>-->
      <!--        <n-dropdown>-->
      <!--          <n-button-->
      <!--            v-show="scope.mode !== 'view'"-->
      <!--            dashed-->
      <!--            style="width: 100%"-->
      <!--            @mouseover="processFilters(scope)"-->
      <!--          >-->
      <!--            添加过滤器-->
      <!--            <fs-icon icon="ant-design:down-outlined" />-->
      <!--          </n-button>-->
      <!--          <template #overlay>-->
      <!--            <n-menu style="margin-top: 12px">-->
      <!--              &lt;!&ndash;            <n-menu-item&ndash;&gt;-->
      <!--              &lt;!&ndash;              v-for="filter in router.filters"&ndash;&gt;-->
      <!--              &lt;!&ndash;              :key="filter.name"&ndash;&gt;-->
      <!--              &lt;!&ndash;              @click="handleFilterChange(filter, scope.form, scope.key)"&ndash;&gt;-->
      <!--              &lt;!&ndash;            >&ndash;&gt;-->
      <!--              &lt;!&ndash;              {{ filter.title }}</n-menu-item&ndash;&gt;-->
      <!--              &lt;!&ndash;            >&ndash;&gt;-->
      <!--            </n-menu>-->
      <!--          </template>-->
      <!--        </n-dropdown>-->
      <!--      </template>-->
    </fs-crud>
  </fs-page>
</template>

<script>
  import { defineComponent, reactive, ref, onMounted } from 'vue';
  import createCrudOptions from './crud';
  import { useExpose, useCrud } from '@fast-crud/fast-crud';
  import { predicates, filters } from './data';
  import { cloneDeep } from 'lodash-es';
  export default defineComponent({
    name: 'GatewayRouteForm',
    setup() {
      const crudRef = ref();
      const crudBinding = ref();
      const inputValue = '';
      const { expose } = useExpose({ crudRef, crudBinding });

      const router = reactive({
        predicates: predicates,
        filters: filters,
      });
      const cloneDeepRouter = cloneDeep(router);

      const { crudOptions } = createCrudOptions({ expose });
      useCrud({ expose, crudOptions });
      onMounted(() => {
        expose.doRefresh();
      });

      function removePredicate(scopeItem, scopeIndex, form, key) {
        router.predicates.push(scopeItem.name);
        form[key].splice(scopeIndex, 1);
      }

      function addTopic(form, key) {
        if (form[key] == null) {
          form[key] = [];
        }
        form[key].push('');
      }
      //删除路由条件配置项
      function removePredicateTag(scopeItem, removedTag) {
        scopeItem.args = scopeItem.args.filter((tag) => tag !== removedTag);
      }

      function handleInputConfirm(scopeItem) {
        if (scopeItem.inputValue) {
          scopeItem.args.push(scopeItem.inputValue);
          scopeItem.args = [...new Set(scopeItem.args)];
          scopeItem.inputValue = undefined;
        }
        scopeItem.inputVisible = false;
      }

      function handlePredicateChange(name, scopeForm, scopeKey) {
        router.predicates.splice(
          router.predicates.findIndex((item) => item === name),
          1
        );
        if (scopeForm[scopeKey] == null) {
          scopeForm[scopeKey] = [];
        }
        const args = [];
        const item = { name, args };
        scopeForm[scopeKey].push(item);
      }
      function showInput(scopeItem) {
        scopeItem.inputVisible = true;
      }

      function processPredicates(scope) {
        router.predicates = cloneDeep(cloneDeepRouter).predicates;
        if (scope.form.predicates) {
          const predicates = new Set(scope.form.predicates?.map((item) => item.name));
          router.predicates = router.predicates.filter((item) => !predicates.has(item));
        }
      }

      function processFilters(scope) {
        router.filters = cloneDeep(cloneDeepRouter).filters;
        if (scope.form.filters) {
          const filters = new Set(scope.form.filters?.map((item) => item.name));
          router.filters = router.filters.filter((item) => !filters.has(item.name));
        }
      }

      function handleFilterChange(filter, scopeForm, scopeKey) {
        router.filters.splice(
          router.filters.findIndex((item) => item.name === filter.name),
          1
        );
        if (scopeForm[scopeKey] == null) {
          scopeForm[scopeKey] = [];
        }
        scopeForm[scopeKey].push(filter);
      }
      function removeFilterParams(scopeItem, filterIndex) {
        scopeItem.args.splice(filterIndex, 1);
      }
      function removeFilter(scopeItem, scopeIndex, form, key) {
        router.filters.push(scopeItem);
        form[key].splice(scopeIndex, 1);
      }
      function addFilterParams(scopeForm) {
        scopeForm.args.push({
          key: '_genkey_' + (scopeForm.args.length + 1),
          value: '',
        });
      }

      const log = (tag) => {
        console.log(tag);
      };
      return {
        removeFilterParams,
        removeFilter,
        addFilterParams,
        processPredicates,
        processFilters,
        inputValue,
        showInput,
        router,
        log,
        handleFilterChange,
        handlePredicateChange,
        handleInputConfirm,
        removePredicateTag,
        removePredicate,
        addTopic,
        crudBinding,
        crudRef,
      };
    },
  });
</script>
